<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: 杨雨翰
 * @LastEditTime: 2022-01-06 20:44:47
-->

<template>
  <div id="leftConntainer1" style="height: 90%">
    <div class="row1">
      <div class="str1">{{ info.city }}</div>
      <div class="str2">日期:{{ info.reportTime.substring(0, 10) }}</div>
    </div>

    <div class="row2">
      <div class="str1">天气:{{ info.weather }}</div>
      <div class="str2">温度：{{ info.temperature }}℃</div>
    </div>

    <div class="row3">
      <div class="str1">风力：{{ info.windPower }}</div>
      <div class="str2">风向：{{ info.windDirection }}</div>
    </div>
  </div>
</template>
<script>
// 请求方法的导入
import { get } from "@/utils/request.js";
import { Area } from "@antv/g2plot";
export default {
  data() {
    return {
      time: "",
    };
  },
  methods: {
    getTiem() {
      this.time = info.reportTime.substring(0, 9);
    },

    watch: {
      info(newv) {
        let humidity = Number(newv.humidity);
        this.liquidPlot.changeData(humidity / 100);
      },
    },

    // initChart() {
    //   //1、准备数据
    //   const data = [
    //     { data: "2022-01-01", "pm2.5": 56 },
    //     { data: "2022-01-02", "pm2.5": 12 },
    //     { data: "2022-01-03", "pm2.5": 43 },
    //     { data: "2022-01-04", "pm2.5": 25 },
    //     { data: "2022-01-05", "pm2.5": 52 },
    //     { data: "2022-01-06", "pm2.5": 87 },
    //     { data: "2022-01-07", "pm2.5": 64 },
    //   ];
    //   //2、初始化图标
    //   const area = new Area("leftConntainer1", {
    //     data,
    //     xField: "data",
    //     yField: "pm2.5",
    //     xAxis: {
    //       range: [0, 1],
    //     },
    //   });
    //   //3、执行绘画渲染
    //   area.render();
    // },
  },

  //vue 实例完全挂载到页面上
  mounted() {
    // this.initChart();
  },

  computed: {
    //map
    info() {
      return this.$store.state.info;
    },
  },
};
</script>
<style scoped>
.row1 {
  margin-top: 35px;
  display: flex;
}
.row2 {
  margin-top: 35px;

  display: flex;
}
.row3 {
  margin-top: 35px;

  display: flex;
}

.str1 {
  line-height: 45px;
  text-align: center;
  font-size: 25px;
  height: 45px;
  width: 250px;
  background: #588bf2;
}
.str2 {
  line-height: 45px;

  text-align: center;
  margin-left: 35px;
  font-size: 25px;
  height: 45px;
  width: 250px;
  background: #588bf2;
}
</style>